<template>
  <div class="channel-info">
    <div class="container">
      <div class="channel-info-title text-overflow">所有通道信息</div>
      <!-- 查询条件 -->
      <div class="filter-box">
        <div class="filter-by-brand">
           <span class="label-brand">选择通道信息：</span>
           <el-select class="filter-select" @change="queryByBrand" v-model="filters.brandid" clearable placeholder="商户审核状态">
            <el-option
              v-for="item in brand_list"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="channel-info-list" v-loading="loading" v-if="channel_list.length!==0">
        <div class="channel-list">
          <table id="datatable"  border="0" cellspacing="0">
              <thead>
                <tr>
                  <th v-for="cell in channel_list_header" :key="cell.prop">
                    <div class="table-cell" v-html="cell.label"></div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(cell,index) in channel_list" :key="index">
                  <td>
                    <div class="table-cell index-cell" v-html="'# '+(index+1)"></div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="cell.id"></div>
                  </td>
                  <td>
                    <div class="table-cell" >
                      <img class="channel-logo" :src="cell.log " alt=".">
                      <span v-html="(cell.name===null?'未知': cell.name) +'-'+cell.channelParams"></span>
                    </div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="'￥'+(cell.singleMinLimit === null?'0':cell.singleMinLimit)+'~￥'+(cell.singleMaxLimit===null?'0':cell.singleMaxLimit)"></div>
                  </td>
                  <td>
                    <div class="table-cell">
                       <el-button @click="updateLimit(cell)">修改</el-button>
                    </div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="'￥'+(cell.everyDayMaxLimit===null?'0':cell.everyDayMaxLimit)"></div>
                  </td>
                  <td>
                    <div class="table-cell">
                       <el-button :class="cell.status ==='1'?'channel-on':'channel-off' " @click="switchChannel(cell)">{{cell.status ==='1'?'开启':'关闭' }}</el-button>
                    </div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="cell.remarks"></div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="cell.status"></div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="cell.extraFee===null? '0元': cell.extraFee+'元'"></div>
                  </td>
                  <td>
                    <div class="table-cell" v-html="cell.withdrawFee===null? '0元': cell.withdrawFee+'元'"></div>
                  </td>
                  <td>
                    <div class="table-cell">
                      <el-button @click="operateCell(cell)">修改</el-button>
                    </div>
                  </td>
                  
                </tr>
              </tbody>
          </table>
          <div class="hot-tips">
            温馨提示：<span>在此可以设置各个贴牌通道的开启，关闭;先选择表格右上角的贴牌商，之后点击相对应的通道开启或关闭按钮 即可;</span>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无数据</div>
    </div>

    <el-dialog :title="dialog.title" :visible.sync="dialog.show" :before-close="beforeCloseDialog">
      <div v-if="dialog.action ==='update-limit'">
        <div class="cell-container">
          <div class="limit-box operate-box">
            <span class="operate-label">单笔限额：</span>
            <el-input-number v-model="currentCell.singleMinLimit" controls-position="right" :min="1"></el-input-number>
            <span style="display:inline-block;padding:0 20px;"> ~ </span>
            <el-input-number v-model="currentCell.singleMaxLimit" controls-position="right" :min="1"></el-input-number>
          </div>
          <div class="everyday-limit operate-box">
            <span class="operate-label">单天限额:</span>
             <el-input-number v-model="currentCell.everyDayMaxLimit" controls-position="right" :min="1"></el-input-number>
          </div>
          <div class="cell-submit">
            <el-button style="width:140px;" type="success" @click="submitLimit">确认</el-button>
            <el-button style="width:140px;"  @click="dialog.show = false">取消</el-button>
          </div>
        </div>
      </div>
      <div v-else-if="dialog.action ==='operate-cell'">
        <div class="cell-container">
          <div class="operate-box">
            <span class="operate-label">加急费:</span>
            <el-input v-model="currentCell.extraFee"></el-input>
          </div>
          <div class="operate-box">
            <span class="operate-label">提现费:</span>
            <el-input v-model="currentCell.withdrawFee"></el-input>
          </div>
          <div class="cell-submit">
            <el-button style="width:140px;" type="success" @click="submitOperate">确认</el-button>
            <el-button style="width:140px;" @click="dialog.show = false">取消</el-button>
          </div>
        </div>
      </div>
      <div v-else>
        nothing
      </div>
    </el-dialog>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
export default {
  name:'channel-info',
  data () {
    return {
        loading:false,
        dialog:{
          title:"提示",
          show:false,
          action:""
        },
        currentCell:{
          id:null,
          singleMinLimit:null,
          singleMaxLimit:null,
          channelType:null,
          everyDayMaxLimit:null,
          name:null,
          extraFee:null,
          withdrawFee:null,
        },
        brand_list:[],
        channel_list:[],
        channel_list_header:[
           {prop:"index",label:"序号"},
           {prop:"id",label:"通道编号"},
           {prop:"name",label:"通道名称"},
           {prop:"singleMinLimit",label:"单笔限额"},
           {prop:"updateRate",label:"修改限额"},
           {prop:"everyDayMaxLimit",label:"当天最大金额"},
           {prop:"switch",label:"通道开关"},
           {prop:"remarks",label:"描述"},
           {prop:"status",label:"状态"},
           {prop:"extraFee",label:"加急费"},
           {prop:"withdrawFee",label:"提现费"},
           {prop:"operation",label:"操作"}
        ],
        filters:{
           brandid:1
        }
    };
  },
  components: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init(){
      this.getBrandInfo();
      this.queryByBrand(1);
    },
    getBrandInfo(){
       // 获取所有贴牌名称
       this.$Http.get(USB.U14).then(res=>{
          if(res.data.resp_code === "000000"){
              this.brand_list = res.data.result;
          }else{
            this.$notify.info({
              title: '提示',
              message: res.data.resp_message
            });
          }
          
       }).catch(res=>{
          this.$notify.error({
            title: '错误',
            message: '获取贴牌信息失败！'
          });
       })
    },
    queryByBrand(value){
      this.loading = true;
      let params = `brand_id=${value}`;
      this.$Http.post(USB.U46,params).then(res=>{
        this.loading = false;
        if(res.data.resp_code === "000000"){
          this.channel_list = res.data.result;
        }else{
          this.$notify.info({
            title: '提示',
            message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.loading = false;
        this.$notify.error({
            title: '错误',
            message: '获取通道信息失败！'
        });
      })
    },
    switchChannel(cell){
      // 通道开关
      let status = cell.status === "1" ? "2":"1";
      let params =`brand_id=${this.filters.brandid}&channel_id=${cell.id}&status=${status}`;
      this.$Http.post(USB.U65,params).then(res=>{
          this.$notify.info({
            title: '提示',
            message: status==="2"?"关闭通道":"开启通道"
          });
          cell.status = status;
      }).catch(err=>{
        this.$notify.error({
            title: '错误',
            message: '获取通道信息失败！'
        });
      })
    },
    operateCell(cell){
      // 操作
      this.currentCell = {...cell};
      this.dialog.title = "操作";
      this.dialog.action = "operate-cell";
      this.dialog.show = true;
      

    },
    updateLimit(cell){
      // 修改限额
      this.currentCell = {...cell};
      this.dialog.title = "修改限额";
      this.dialog.action = "update-limit";
      this.dialog.show = true;  

    },
    submitLimit(){
      // 提交限额
      let params = `channelid=${this.currentCell.id}&channel_no=${this.currentCell.channelType}&name=${this.currentCell.name}
      &single_min_limit=${this.currentCell.singleMinLimit}&single_max_limit=${this.currentCell.singleMaxLimit}&every_day_max_limit=${this.currentCell.everyDayMaxLimit}`;
      this.$Http.post(USB.U62,params).then(res=>{
        if(res.data.resp_code === "000000"){
          this.dialog.show = false;
          this.queryByBrand(this.filters.brandid);
        }else{
          this.$notify.info({
            title: '提示',
            message: res.data.resp_message
          });
        }
      }).catch(err=>{
        this.$notify.error({
            title: '错误',
            message: '修改限额信息失败！'
        });
      })

    },
    submitOperate(){
      // 提交操作
      if(this.currentCell.rate === null){
        this.$notify.info({
            title: '提示',
            message: "当前费率没有设置，无法设置加急费以及提现费！"
        });
        this.dialog.show = false;
      }
      let params = `brand_id=${this.filters.brandid}&channel_id=${this.currentCell.id}
      &rate=${this.currentCell.rate}&extra_fee=${this.currentCell.extraFee}&with_draw_fee=${this.currentCell.withdrawFee}`;
      this.$Http.post(USB.U89,params).then(res=>{
        if(res.data.resp_code === "000000"){
          this.dialog.show = false;
           this.queryByBrand(this.filters.brandid);
        }else{
          this.$notify.info({
            title: '提示',
            message: res.data.resp_message
          });
        }
      }).catch(err=>{
          this.$notify.error({
            title: '错误',
            message: '修改费率信息失败！'
        });
      })

    },
    beforeCloseDialog(){
     this.dialog.show = false;
      setTimeout(()=>{
         this.dialog.action = "";
      },500)  
    }

  }
}

</script>
<style scoped>
.channel-info{
    box-sizing: border-box;
    padding: 20px;
}
.channel-info-title{
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.container{
  border: 1px solid #ededed;
}
.cell-container{
  padding: 20px;
  border: 1px solid #dfdfdf;
}
.filter-box{
  padding: 10px 30px;
}
.channel-on{
 background:#32CD32;
}
.channel-off{
  background:#A9A9A9;
}
.channel-logo{
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
.everyday-limit{
  padding: 10px 0;
}
.label-brand{
  font-size: 14px;
  color: #409eff;

}
.cell-submit{
  padding: 10px 20px;
  text-align: center;
}
.hot-tips{
  padding: 20px;
}
table{
    background-color: #FFF;
    width: 100%;
    font-size: 12px;
    min-width: 900px;
}
th{
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
    
}
thead{
    padding: 8px 0;
    color: #909399;
}
tr{
    padding: 8px 0;
}
tr:hover{
    background-color: #F5F7FA;
}
td{
    border: none;
    border-bottom: 1px solid #ebeef5;
}
.table-cell{
    white-space: normal;
    word-break: break-all;
    line-height: 22px;
    padding: 10px 10px;
    text-align: center;
    min-width: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.index-cell{
  min-width: 50px;
}
.operate-box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
}
.operate-label{
  display: inline-block;
  width: 100px;
  padding-right: 20px;
  text-align: right;
}
</style>